<template>
  <div class="mask">
    <div v-if="!isdel" class="tips">
      <div>
        <label for="name"
          >姓名<input
            type="text"
            v-model="info.name"
            placeholder="姓名"
            id="name"
        /></label>
      </div>
      <div>
        <label for="tel"
          >电话<input type="tel" v-model="info.tel" placeholder="电话" id="tel"
        /></label>
      </div>
      <div v-if="!isedit" class="btn">
        <span @click="add(true)">确认提交</span>
        <span @click="add(false)">取消</span>
      </div>
      <div v-else class="btn">
        <span @click="edit(true)">编辑确认</span>
        <span @click="edit(false)">取消</span>
      </div>
    </div>
    <div v-else class="del">
      <div class="btn">
        <span @click="del(true)">确认删除</span>
        <span @click="del(false)">取消</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isdel", "editperson", "isedit"],
  data() {
    return {
      info: {
        name: "",
        tel: "",
      },
    };
  },
  methods: {
    add(e) {
      if (e) {
        if (this.info.name == "" || this.info.tel == "") {
          alert("请输入电话和联系人");
          return;
        }
        this.$emit("addperson", this.info);
      } else {
        this.$emit("addperson");
      }
    },
    del(e) {
      this.$emit("delperson", e);
    },
    edit(e) {
      if (e) {
        if (this.info.name == "" || this.info.tel == "") {
          alert("请输入电话和联系人");
          return;
        }
        
        this.$emit("editperson",this.info);
      }else{
        this.$emit("editperson");
      }
    },
  },
  mounted() {
    if (this.isedit) {
      this.info.name = this.editperson.name;
      this.info.tel = this.editperson.tel;
    }
  },
};
</script>

<style scoped>
.mask {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.tips {
  width: 100%;
  height: 40vh;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.tips > div:nth-child(1),
.tips > div:nth-child(2) {
  width: 100%;
  height: 10vh;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  padding-left: 20px;
}
input {
  width: 250px;
  margin-left: 20px;
  border: none;
  background-color: #fff;
  height: 30px;
}
input:focus {
  appearance: none;
}
.btn {
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.btn > span {
  display: block;
  width: 80%;
  height: 40%;

  border-radius: 25px;
  line-height: 6vh;
}
.btn > span:nth-child(1) {
  background-color: #6495ed;
}
.btn > span:nth-child(2) {
  background-color: #efefef;
}
.del {
  width: 100%;
  height: 20vh;
  background-color: #fff;
  position: fixed;
  bottom: 0;
}
</style>